@mixin textHidden($lineClamp) {
    -webkit-line-clamp: $lineClamp;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin fontCustomStyle($color: #fff, $size: 14px) {
    color: $color;
    font-size: $size;
}

@font-face {
    /*给字体命名*/
    font-family: 'PangMenZhengDao';
    /*引入字体文件*/
    src: url('../../assets/font/pmzd.ttf');
    font-weight: normal;
    font-style: normal;
}

@mixin pmzd() {
    font-family: 'PangMenZhengDao';
}

//默认设计稿的宽度
$designWidth: 1920;
//默认设计稿的高度
$designHeight: 1080;

//px转为vw的函数

@function vw($px) {
    @return calc($px / $designWidth * 100vw);
}

//px转为vh的函数

@function vh($px) {
    @return calc($px / $designHeight * 100vh);
}

//自定义page样式
.customPageClass {
    ::v-deep(.el-pagination__total) {
        margin-right: 0;
    }
    ::v-deep(.el-pagination__jump),
    ::v-deep(.is-last) {
        color: #fff;
    }
    ::v-deep(.el-pager li) {
        background: transparent;
        border: 1px solid #1b93fb;
        color: #fff;
    }
    ::v-deep(.btn-prev),
    ::v-deep(.btn-next) {
        background: transparent !important;
        border: 1px solid #1b93fb;
        color: #fff;
    }
    ::v-deep(.el-input__wrapper) {
        background: transparent;
        box-shadow: 0 0 0 1px#1b93fb;
    }
    ::v-deep(.el-input__inner) {
        color: #fff;
    }
}
@mixin input_inner() {
    --el-input-border-color: rgba(0, 102, 255, 1);
    --el-input-text-color: #fff;
}
@mixin input_wrapper() {
    background-color: rgba(3, 33, 58, 0.58);
    --el-input-border-color: rgba(0, 102, 255, 1);
}
//自定义form表单中文提示样式
.formParams {
    ::v-deep(.el-form-item__label) {
        color: #1b93fb;
    }
}
//自定义form表单下拉框样式
.formSelect {
    ::v-deep(.el-input) {
        @include input_inner();
    }
    ::v-deep(.el-input__wrapper) {
        background-color: rgba(3, 33, 58, 0.58);
        &:hover {
            box-shadow: none;
        }
    }
    ::v-deep(.el-popper .is-pure .is-light .el-select__popper),
    ::v-deep(.el-select-dropdown) {
        @include input_wrapper();
    }
}
//自定义form输入框颜色

.formInput {
    ::v-deep(.el-input__inner) {
        @include input_inner();
    }
    ::v-deep(.el-input__wrapper) {
        @include input_wrapper();
        &:hover {
            box-shadow: none;
        }
    }
}
// 自定义日期选择器 必须要有个父级div作为此类目
.formDatePicker {
    :deep(.el-input__wrapper) {
        @include input_wrapper();
        &:hover {
            box-shadow: none;
        }
    }

    :deep(.el-month-table td.in-range div),
    :deep(.el-picker-panel),
    :deep(.el-date-table td.in-range .el-date-table-cell) {
        background: transparent;
    }

    :deep(.el-picker__popper.el-popper) {
        background: rgba(3, 33, 58, 0.9) !important;
        border: none;
    }
    :deep(.el-picker-panel__icon-btn .el-icon svg) {
        color: #9ecee2 !important;
        &:hover {
            color: #9ecee2 !important;
        }
    }
    :deep(.el-popper__arrow::before) {
        background: rgba(3, 33, 58, 0.9) !important;
        border: none;
    }
    :deep(.el-date-picker__header--bordered) {
        border-color: #9ecee2;
    }
    :deep(.el-date-table td.today .el-date-table-cell__text),
    :deep(.el-year-table td.today .cell),
    :deep(.el-month-table td.today .cell),
    :deep(.el-year-table td.current:not(.disabled) .cell),
    :deep(.el-month-table td.current:not(.disabled) .cell) {
        background: #3eacec;
        color: #fff !important;
        border-radius: 4px;
        &:hover {
            color: #fff;
        }
    }
    :deep(.el-date-range-picker__content .el-date-range-picker__header div),
    :deep(.el-date-picker__header-label),
    :deep(.el-year-table td .cell),
    :deep(.el-month-table td a),
    :deep(.el-date-table th),
    :deep(.el-date-table-cell__text) {
        color: #9ecee2;
        &:hover {
            color: #9ecee2;
        }
    }
    :deep(.el-date-range-picker__content.is-left) {
        border-right: 1px solid transparent;
    }
    :deep(.el-month-table .start-date .cell),
    :deep(.el-month-table .end-date .cell),
    :deep(.el-date-table td.end-date .el-date-table-cell__text),
    :deep(.el-date-table td.start-date .el-date-table-cell__text) {
        color: #fff !important;
    }
    :deep(.prev-month .el-date-table-cell__text),
    :deep(.next-month .el-date-table-cell__text) {
        color: #999 !important;
        &:hover {
            color: #999;
        }
    }
    :deep(.el-input__inner) {
        caret-color: transparent;
        color: #fff;
    }
}
